<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper class="swiper" indicator-dots :autoplay="swiperConf.autoplay" :interval="swiperConf.interval">
        <swiper-item v-for="(banner, index) in swiperConf.banners" :key="index">
          <view class="swiper-item">
            <image :src="banner" mode="scaleToFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 九宫格 -->
    <view class="grid-container">
      <view class="grid-box">
        <template v-for="(item, index) in grids" :key="index">
          <view class="grid-item" @click="onNavTap(item)">
            <view class="icon-box">
              <text class="iconfont">{{ item.icon }}</text>
            </view>
            <view class="text-box">
              <text>{{ item.title }}</text>
            </view>
            <!-- 客服会话按钮 -->
            <button class="contact-btn" v-if="item.title === '客服'" open-type="contact"></button>
          </view>
        </template>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list-container">
      <GoodsList />
    </view>
    <view class="load-more-container" v-if="useState.status">
      <uni-load-more status="loading"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { useGoodsList } from '@/common/use/goods-list.js'
import GoodsList from '@/components/goods-list/goods-list.vue'

export default defineComponent({
  name: "Index",
  components: {
    GoodsList
  },
  setup() {
    // 轮播配置
    const swiperConf = reactive({
      autoplay: true,
      interval: 5000,
      banners: [
        "../../static/images/delete/d1.png",
        "../../static/images/delete/d2.png",
        "../../static/images/delete/d3.png"
      ]
    });
    // 导航按钮
    const grids = ref([
      {
        title: "充值",
        icon: "\ue600",
        navigateTo: "/pages/recharge/recharge"
      },
      {
        title: "客服",
        icon: "\ue658",
        navigateTo: ""
      },
      {
        title: "游戏规则",
        icon: "\ue615",
        navigateTo: "/pages/rules/rules"
      }
    ]);
    const { useGoods, useState } = useGoodsList();
    
    // 导航点击
    const onNavTap = (item) => {
      if (item.title !== "客服") {
        uni.navigateTo({url: item.navigateTo});
      }
    }
    
    onMounted(() => {
      console.log("我是首页21");
    })

    return {
      swiperConf,
      grids,
      useGoods,
      useState,
      onNavTap
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/static/styles/variables.scss';

$swiperHeight: 400rpx;

.container {
  padding: 15rpx;
}

.swiper {
  height: $swiperHeight;
  
  .swiper-item {
    height: $swiperHeight;
    
    > image {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
}

.grid-container {
  margin-top: 30rpx;
  
  .grid-box {
    display: flex;
    flex-wrap: wrap;
    
    .grid-item {
      width: 33.3333%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      
      .contact-btn {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 100%;
      }
      
      .icon-box {
        width: 100rpx;
        height: 100rpx;
        background-color: $primaryColor; 
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        
        .iconfont {
          color: #fff;
          font-size: 60rpx;
        }
      }
      
      .text-box {
        font-size: 28rpx;
      }
    }
  }
}

.goods-list-container {
  margin-top: 60rpx;
}

</style>
